<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>身份验证</title>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/jquery-weui.css"/>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/weui.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/example.css">
    <script src="__PUBLIC__/js/jquery-3.0.0.min.js"></script>
    <style>
        .out {

            width: 96%;
            margin: 50px auto;
        }
        .out h2{
            padding: 4px .2em;
            color:#225fba;
        }
        .out h2 img{
            vertical-align:-1px;
            margin-left: 5px;
            width:22px;
        }

        .getvode {
            vertical-align: middle;

        }

        .tip {
            /*background:;*/
            position: absolute;
            top: 10px;
            right: 5px;
            color: #E64340;
            font-weight: bold;
        }
        .sure{
            margin-top:25px;
        }

        /*.weui_cells:before,.weui_cells:after{*/
        /*border: none;*/
        /*}*/

    </style>
    <script>
        document.addEventListener('WeixinJSBridgeReady',
                function onBridgeReady(){
                    WeixinJSBridge.call('hideOptionMenu');
                });
        function abc(){
            WeixinJSBridge.call('closeWindow');
        }
    </script>
</head>
<body>
<div class="out">
    <h2>手机短信安全验证</h2>
    <input type="hidden" name="openid" id="openid" value="{$openid}">
    <div class="weui_cells">
        <div class="weui_cell">
            <div class="weui_cell_bd weui_cell_primary">
                <input class="weui_input" type="number" name="tel" pattern="[0-9]*" placeholder="输入您的手机号码" id="phone" value=""/>
                <div id="telphone_tip" class="tip telphone_tip"></div>
            </div>
        </div>

    </div>
        <div class="weui_cell_ft" style="margin-top:15px;">
            <input type="button" class="weui_btn weui_btn_mini weui_btn_primary getvode" id="btn" value=" 获取验证码" >
        </div>
        <div class="weui_cells">
        <div class="weui_cell" >
            <div class="weui_cell_bd weui_cell_primary">
                <input class="weui_input" type="number" id="code" placeholder="请输入验证码"/>
                <div id="codeyz" class="tip"></div>
            </div>
        </div>
    </div>
    <div class="sure">
        <button id="verify" class="weui_btn weui_btn_primary" >确认</button>
        <a href="javascript:;" onclick="abc()" id="exit" class="weui_btn weui_btn_warn">退出</a>
    </div>
    <div style="display:none" id="wuli">
        <div class="weui-mask"></div>
        <div class="weui-dialog">
            <div class="weui-dialog__hd"><strong class="weui-dialog__title">提示消息</strong></div>
            <div id="tishi" class="weui-dialog__bd">请您选择技能标签!</div>
            <div class="weui-dialog__ft">
                <a href="javascript:;" id="queding" class="weui-dialog__btn weui-dialog__btn_primary">确定</a>
            </div>
        </div>
    </div>
    <script>
        $('#verify').click(function() {
            var classname = $('#yzm').attr('class');
            var tel = $("#phone").val();
            var openid = $('#openid').val();
            if(classname == 'weui_icon_success'){
                $.ajax({
                    type : 'post',
                    url : "__CONTROLLER__/authentication",
                    data : {tel:tel,openid:openid},
                    async : true,
                    success:function(res){
                        if(res == 'ok'){
                            alert('身份已验证,无需重复操作');
                        }else  if(res == true){
                            alert('身份验证,注册成功');
                            abc();
                       }else{
                            alert('身份验证失败');
                       }
                    }
                })
            }
        })
    </script>
</div>
<script type="application/javascript">
    telRuleCheck2 = function (string) {
        var pattern = /^1[34578]\d{9}$/;
        if (pattern.test(string)) {
            return true;
        }else{
            //console.log('check mobile phone ' + string + ' failed.');
            return false;
        }
    };
    $("#phone").blur("blur", function () {
        var phone = $("#phone").val();
        if (phone == "") {
            document.getElementById("btn").disabled = true;
        } else {
            if (telRuleCheck2(phone)) {
                $("#telphone_tip").html("<i  class='weui_icon_success'></i>");
                document.getElementById("btn").disabled = false;
            } else {
                $("#telphone_tip").html("<i class='weui_icon_warn'></i>" + "格式不正确");
                document.getElementById("btn").disabled = true;
            }
        }
    });
    var wait = 60;
    function time(o) {
        if (wait == 0) {
            o.removeAttribute("disabled");
            o.value = "获取验证码";
            wait = 60;
        } else {
            o.setAttribute("disabled", true);
            o.value = "重新发送(" + wait + ")";
            wait--;
            setTimeout(function () {
                        time(o)
                    }, 1000
            )
        }
    }
    document.getElementById("btn").onclick = function () {
        var tel = $('#phone').val();
        var flon = 0;
        $.ajax({
            url : "__CONTROLLER__/yztel",
            data : {tel:tel},
            async : false,
            type : 'post',
            success: function(res){
                flon = res;
            }
        });
        if(flon == 1){
            alert('此号码在实验室没有记录,不能进行身份验证!');
        }else if(flon == 2){
            alert('此号码已经完成了身份验证!');
        }else if(flon == 3){
            time(this);
            var url = "__CONTROLLER__/smscode/tel/" + tel;
            $.get(url, function (res) {
                console.log(res);
            });
        }
    };
    function close(){
        $('#queding').click(function(){
            $('#wuli').css('display','none');
        })
    }

    $('#code').blur(function(){
        var tel = $('#phone').val();
        var code = $(this).val();
        var url = "__CONTROLLER__/checksms/tel/"+tel+"/code/"+code;
        $.get(url,function(res){
//            alert(typeof(res.aa));
//            alert(typeof(res.code));
            if(res == true){
                $("#codeyz").html("<i id='yzm' class='weui_icon_success'></i>");
                document.getElementById("verify").disabled = false;
            }else{
                $("#codeyz").html("<i id='yzm' class='weui_icon_warn'></i>"+"验证码不正确");
                document.getElementById("verify").disabled = true;
            }
        })
    });

</script>
</body>
</html>